import React, { Component } from 'react';
import { FileFilled } from '@ant-design/icons';
import AutoTable from '@/components/AutoTable';
import moment from 'moment';
import IconFont from '@/components/IconFont';
import { Tooltip } from 'antd';
//  /** 170=等待刷卡中 */

let dip = {
  0: {
    title: '空闲',
    color: '#40D851',
  },
  1: {
    title: '充电中',
    color: 'lightblue',
  },
  2: {
    title: '未充占用',
    color: '#BC12ED',
  },
  3: {
    title: '充满占用',
    color: '#0103FD',
  },
  4: {
    title: '端口故障',
    color: '#E40C00',
  },
  5: {
    title: '浮充',
    color: '#06F9E0',
  },
  88: {
    title: '绑定端口',
    color: '#ffac93',
  },
  99: {
    title: '端口禁用',
    color: '#400000',
  },
  170: {
    title: '等待刷卡中',
    color: '#ff4800',
  },
  6: {
    title: '存储器损坏',
    color: '#005BAC',
  },
  7: {
    title: '安全门卡住',
    color: '#d3ac2b',
  },
  8: {
    title: '接触不良或保险丝烧断',
    color: '#009DA2',
  },
  9: {
    title: '继电器粘连',
    color: '#ee45e4',
  },
  10: {
    title: '霍尔芯片损坏',
    color: '#FDF204',
  },
};

function Device() {
  let columnes = [
    {
      title: `设备号`,
      dataIndex: 'code',
      key: 'code',
      search: false,
    },
    {
      title: 'sim卡号',
      dataIndex: 'sim',
      key: 'sim',
      search: false,
      width: 200,
    },
    {
      title: '联网状态',
      dataIndex: 'isNetWork',
      key: 'isNetWork',
      search: false,
      render: (text, row) => {
        return <span>{row?.isNetWork == 1 ? '是' : '否'}</span>;
      },
    },
    {
      title: '最新联网时间',
      dataIndex: 'time',
      key: 'time',
      search: false,
      width: 180,
    },
    {
      title: '充电区',
      dataIndex: 'areaName',
      key: 'areaName',
      search: false,
    },
    {
      title: '当前温度',
      dataIndex: 'sidetemp',
      key: 'sidetemp',
      search: false,
    },
    {
      title: '电压',
      dataIndex: 'voltage',
      key: 'voltage',
      search: false,
    },
    {
      title: '设备类型',
      dataIndex: 'deviceType',
      key: 'deviceType',
      search: false,
    },
    {
      title: '固件版本',
      dataIndex: 'version',
      key: 'version',
      search: false,
    },
    {
      title: '虚拟ID',
      dataIndex: 'vid',
      key: 'vid',
      search: false,
    },
    {
      title: '频率',
      dataIndex: 'frequency',
      key: 'frequency',
      search: false,
    },
    {
      title: '端口状态',
      dataIndex: 'portList',
      key: 'portList',
      search: false,
      render: (text, row) => {
        let curlist = row.portList ? JSON.parse(row.portList) : [];
        return (
          <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
            {curlist &&
              curlist.map((it, i) => {
                return (
                  <Tooltip key={i} title={dip[it].title}>
                    <div className="cd" style={{ backgroundColor: dip[it].color }}>
                      <div className={it == '1' ? 'ing' : ''}>
                        <div
                          className="center"
                          style={{ width: '100%', height: '100%', zIndex: 99 }}
                        >
                          {i + 1}
                        </div>
                      </div>
                    </div>
                  </Tooltip>
                );
              })}
          </div>
        );
      },
    },
  ];

  return (
    <div>
      <p className="title" style={{ marginBottom: 0 }}>
        <span>
          <FileFilled style={{ paddingRight: 6 }} />
          设备信息
        </span>
      </p>
      <div className="center" style={{ justifyContent: "flex-start", flexDirection: "row", alignItems: "center", flexWrap: "wrap" }}>
        <b style={{ color: "#fff", fontSize: 18 }}>
          充电状态
        </b>
        {
          Object.keys(dip).map((it, i) => {
            return <Tooltip key={i} title={dip[it].title}>
              <div style={{ display: "flex", justifyContent: "flex-start", margin: 12 }}>
                <div className="cd" style={{ backgroundColor: dip[it].color }}>
                  <div className={it == '1' ? 'ing' : ''}>
                    <div
                      className="center"
                      style={{ width: '100%', height: '100%', zIndex: 99 }}
                    />
                  </div>
                </div>
                <span style={{ color: "#fff" }}>
                  {dip[it].title}
                </span>
              </div>
            </Tooltip>
          })
        }
      </div>
      <AutoTable
        path="/vehicle-api/charge/devices"
        rowClassName={(record, index) => {
          let className = index % 2 ? 'shallow_gray' : 'deep_gray';
          return className;
        }}
        columns={columnes}
        bordered={false}
        withCard={false}
        style={{ height: 'auto' }}
        onlyTable={true}
        format={'rows'}
      />


    </div>
  );
}

export default Device;
